import { watch, ref } from 'vue'
import { isString } from '@/utils/is'

import { useAppStoreWithOut } from '@/stores/modules/app'

const appStore = useAppStoreWithOut()

export const useTitle = (title: string) => {
  const _title = ref(title ? `${appStore.getTitle} - ${title}` : appStore.getTitle)
  watch(
    _title,
    (n, o) => {
      if (isString(n) && n !== o && document) {
        document.title = n
      }
    },
    { immediate: true }
  )

  return _title
}
